'use client'

import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { ArrowRight, Download, FileText, LogOut } from 'lucide-react'
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell
} from 'recharts'

// Mock data for charts
const gradeDistribution = [
  { range: '0-59', count: 5 },
  { range: '60-69', count: 15 },
  { range: '70-79', count: 25 },
  { range: '80-89', count: 35 },
  { range: '90-100', count: 20 },
]

const trendData = [
  { week: '第1周', avgScore: 75 },
  { week: '第2周', avgScore: 78 },
  { week: '第3周', avgScore: 72 },
  { week: '第4周', avgScore: 80 },
  { week: '第5周', avgScore: 82 },
]

const passRateData = [
  { name: '通过', value: 85 },
  { name: '未通过', value: 15 },
]

const COLORS = ['#4CAF50', '#f44336']

export default function StudentDashboard() {
  const [selectedYear, setSelectedYear] = useState('2023')
  const [selectedTerm, setSelectedTerm] = useState('1')

  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <Card className="mx-auto max-w-6xl">
        <div className="flex items-center justify-between border-b p-4">
          <h1 className="text-xl font-semibold">学生成绩查询</h1>
          <Button variant="outline" size="sm">
            <LogOut className="mr-2 h-4 w-4" />
            导出
          </Button>
        </div>

        <Tabs defaultValue="query" className="p-4">
          <TabsList>
            <TabsTrigger value="query">成绩查询</TabsTrigger>
            <TabsTrigger value="documents">相关文档</TabsTrigger>
            <TabsTrigger value="analysis">成绩分析</TabsTrigger>
          </TabsList>

          <TabsContent value="query">
            <div className="space-y-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">学年:</label>
                <Select value={selectedYear} onValueChange={setSelectedYear}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择学年" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2023">2023-2024学年</SelectItem>
                    <SelectItem value="2022">2022-2023学年</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium">学期:</label>
                <Select value={selectedTerm} onValueChange={setSelectedTerm}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择学期" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1">第一学期</SelectItem>
                    <SelectItem value="2">第二学期</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="mt-8 text-sm text-gray-500">
                不合格的部分将用红色标记，通过补考或重修及格的用蓝色标记
              </div>

              <div className="text-right">
                <Button>查询</Button>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="documents">
            <div className="space-y-4">
              <div className="rounded-lg border p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    <FileText className="h-6 w-6 text-blue-500" />
                    <div>
                      <h3 className="font-medium">成绩评定标准文档</h3>
                      <p className="text-sm text-gray-500">PDF - 2.1 MB</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">查看</Button>
                </div>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="analysis" className="space-y-8">
            <div className="grid gap-6 md:grid-cols-2">
              {/* 成绩分布统计 */}
              <Card>
                <CardContent className="p-6">
                  <h3 className="mb-4 text-lg font-medium">成绩分布统计</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <BarChart data={gradeDistribution}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="range" />
                      <YAxis />
                      <Tooltip />
                      <Legend />
                      <Bar dataKey="count" fill="#3b82f6" name="学生人数" />
                    </BarChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>

              {/* 通过率分析 */}
              <Card>
                <CardContent className="p-6">
                  <h3 className="mb-4 text-lg font-medium">通过率分析</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <PieChart>
                      <Pie
                        data={passRateData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                      >
                        {passRateData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>

              {/* 成绩趋势分析 */}
              <Card className="md:col-span-2">
                <CardContent className="p-6">
                  <h3 className="mb-4 text-lg font-medium">成绩趋势分析</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <LineChart data={trendData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="week" />
                      <YAxis />
                      <Tooltip />
                      <Legend />
                      <Line
                        type="monotone"
                        dataKey="avgScore"
                        stroke="#3b82f6"
                        name="平均分"
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>
            </div>

            {/* 分析报告下载区 */}
            <Card>
              <CardContent className="p-6">
                <h3 className="mb-4 text-lg font-medium">分析报告</h3>
                <div className="space-y-4">
                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div className="flex items-center space-x-4">
                      <FileText className="h-6 w-6 text-blue-500" />
                      <div>
                        <h4 className="font-medium">成绩分析总结报告</h4>
                        <p className="text-sm text-gray-500">包含详细的统计数据和分析结果</p>
                      </div>
                    </div>
                    <Button>
                      <Download className="mr-2 h-4 w-4" />
                      下载报告
                    </Button>
                  </div>

                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div className="flex items-center space-x-4">
                      <FileText className="h-6 w-6 text-blue-500" />
                      <div>
                        <h4 className="font-medium">班级成绩对比报告</h4>
                        <p className="text-sm text-gray-500">各班级成绩对比和分析</p>
                      </div>
                    </div>
                    <Button>
                      <Download className="mr-2 h-4 w-4" />
                      下载报告
                    </Button>
                  </div>

                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div className="flex items-center space-x-4">
                      <FileText className="h-6 w-6 text-blue-500" />
                      <div>
                        <h4 className="font-medium">学生成绩进步分析</h4>
                        <p className="text-sm text-gray-500">学生个人成绩趋势分析</p>
                      </div>
                    </div>
                    <Button>
                      <Download className="mr-2 h-4 w-4" />
                      下载报告
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </Card>
    </div>
  )
}

